<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="460"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-row :gutter="10" class="department"></a-row>
    <a-form>
      <!--    checkable -->
      <a-tree
        @check="onCheck"
        :checkedKeys="checkedKeys"
        :treeData="treeData"
        @expand="onExpand"
        @select="onTreeNodeSelect"
        :selectedKeys="selectedKeys"
        :expandedKeys="expandedKeysss"
        :checkStrictly="checkStrictly"
      >
        <span slot="custom" slot-scope="item" class="boundary">
          <div>{{ item.boundaryName }}</div>
          <a-icon
            type="align-left"
            style="margin-left: 5px; color: red"
          ></a-icon>
        </span>
      </a-tree>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown
        style="float: left"
        :trigger="['click']"
        placement="topCenter"
      >
        <a-menu slot="overlay">
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button> 树操作 <a-icon type="up" /> </a-button>
      </a-dropdown>
    </div>
    <boundary-entry-modal ref="datarule"></boundary-entry-modal>
  </a-drawer>
</template>
<script>
import {
  queryTreeListForRole,
  queryRolePermission,
  saveRolePermission,
  getAccountingBoundary,
} from "@/api/api";
import BoundaryEntryModal from "./BoundaryEntryModal.vue";

export default {
  name: "RoleModal",
  components: {
    BoundaryEntryModal,
  },
  data() {
    return {
      roleId: "",
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      title: "核算边界",
      visible: false,
      loading: false,
      selectedKeys: [],
    };
  },
  methods: {
    onTreeNodeSelect(id, e) {
      //   console.log(id,e)
      let selectObj = e.node.dataRef;
      if (id && id.length > 0) {
        this.selectedKeys = id;
      }
      this.$refs.datarule.show(this.selectedKeys[0], selectObj);
    },
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked;
      } else {
        this.checkedKeys = o;
      }
    },
    show(roleId) {
      this.roleId = roleId;
      this.visible = true;
    },
    close() {
      this.reset();
      this.$emit("close");
      this.$parent.selectedRowKeys1 = [];
      this.visible = false;
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false;
    },
    reset() {
      this.expandedKeysss = [];
      this.checkedKeys = [];
      this.defaultCheckedKeys = [];
      this.loading = false;
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys;
    },
    closeAll() {
      this.expandedKeysss = [];
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys;
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = [];
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    handleCancel() {
      this.close();
    },
    handleSubmit(exit) {
      let that = this;
      let params = {
        roleId: that.roleId,
        permissionIds: that.checkedKeys.join(","),
        lastpermissionIds: that.defaultCheckedKeys.join(","),
      };
      that.loading = true;
      //   console.log("请求参数：", params);
      saveRolePermission(params).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loading = false;
          if (exit) {
            that.close();
          }
        } else {
          that.$message.error(res.message);
          that.loading = false;
          if (exit) {
            that.close();
          }
        }
        this.loadData();
      });
    },
    treeForeach(tree, func) {
      tree.forEach((data) => {
        data.scopedSlots = { title: "custom" };
        func(data);
        data.children && this.treeForeach(data.children, func);
      });
    },
    loadData() {
   
      getAccountingBoundary({ industryId: this.roleId }).then((res) => {
        //   console.log(res.result);
        this.treeData = res.result;
        //   console.log(this.treeData);
          var treeIds = [];
        this.treeForeach(this.treeData, (node) => {
          //   console.log(node)
         treeIds.push(node.key);
             
        });
        this.allTreeKeys = treeIds;
        this.expandedKeysss =  this.allTreeKeys
      });
      // queryTreeListForRole().then((res) => {
      //   window.resa = res.result;
      //   this.treeData = res.result.treeList;
      //   this.allTreeKeys = res.result.ids;
      //   queryRolePermission({ roleId: this.roleId }).then((res) => {
      //     this.checkedKeys = [...res.result];
      //     this.defaultCheckedKeys = [...res.result];
      //     this.expandedKeysss = this.allTreeKeys;

      //   });
      // });
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
.boundary {
  width: 100%;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>